<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :max-height="props.maxHeight"
    :header-cell-style="{ background: '#fafafb', color: 'gray' }"
  >
    <el-table-column prop="name" label="账号名称" >
             <template #default="{ row }">
              <div class="table_box">
                <p>{{row.name}}</p>
                <p>{{row.name}}</p>
              </div>
             </template>
            </el-table-column>
            <el-table-column prop="name" label="账号详情" >
            <template #default="{ row }">
              <div class="table_box">
                <p><span>所属平台：</span>{{row.address}}</p>
                <p><span>登录凭证：</span>{{row.name}}</p>
              </div>
             </template>
            </el-table-column>
            <el-table-column prop="address" label="绑定设备" >
            <template #default="{ row }">
              <div class="table_box">
                <p>{{row.address}}</p>
                <p><span>{{row.name}}</span></p>
              </div>
             </template>
            </el-table-column>
            <el-table-column prop="address" label="设备名称" />
            <el-table-column prop="address" label="最后登录情况" >
            <template #default="{ row }">
              <div class="table_box">
                <p>{{row.date}}</p>
                <p><span>{{row.name}}</span></p>
              </div>
             </template>
            </el-table-column>
            <el-table-column prop="address" label="授权人员" />
            <el-table-column prop="address" label="任务栏图标" />
            <el-table-column prop="address" label="标签" />
            <el-table-column prop="address" label="企业简称" />
            <el-table-column prop="name" label="创建者" />
            <el-table-column prop="address" label="创建时间" />
            <el-table-column fixed="right" label="操作" >
              <template #default  >
                  <el-button type="primary" size="small" style="margin-right: 5px;">切换</el-button>
                  <el-dropdown placement="bottom-start" trigger="click">
                    <el-button size="small">
                      ...
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>续费设备</el-dropdown-item>
                        <el-dropdown-item>设为星标账号</el-dropdown-item>
                        <el-dropdown-item>置顶</el-dropdown-item>
                        <el-dropdown-item>查看账号</el-dropdown-item>
                        <el-dropdown-item>编辑账号</el-dropdown-item>
                        <el-dropdown-item>复制账号</el-dropdown-item>
                        <el-dropdown-item>解绑设备</el-dropdown-item>
                        <el-dropdown-item>授权成员</el-dropdown-item>
                        <el-dropdown-item>成员访问控制</el-dropdown-item>
                        <el-dropdown-item>附加账号管理</el-dropdown-item>
                        <el-dropdown-item>临时模式启动</el-dropdown-item>
                        <el-dropdown-item>
                          <el-dropdown placement="bottom-start">
                            <span>Cookie管理></span>
                            <template #dropdown>
                              <el-dropdown-menu>
                               <el-dropdown-item>导入Cookie</el-dropdown-item>
                               <el-dropdown-item>导出Cookie</el-dropdown-item>
                               <el-dropdown-item>Cookie备份管理</el-dropdown-item>
                               <el-dropdown-item>非持久化Coolie设置</el-dropdown-item>
                              </el-dropdown-menu>
                            </template>
                          </el-dropdown>
                        </el-dropdown-item>
                        <el-dropdown-item>清除缓存</el-dropdown-item>
                        <el-dropdown-item>快捷修改UA</el-dropdown-item>
                        <el-dropdown-item>删除账号</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
              </template>
            </el-table-column>
  </el-table>
  <div class="page_box">
    <el-pagination
      v-model:current-page="params.pageNo"
      v-model:page-size="params.pageSize"
      :page-sizes="[100, 200, 300, 400]"
      background="background"
      layout="sizes, prev, pager, next,total"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'

const props = defineProps({
  type: {
    type: String, //账号的类型
    default: ''
  },
  maxHeight: {
    type:String,
    default: '1000'
  }
})

// const emit = defineEmits(['update:type'])

const params = ref({
  pageNo: 1,
  pageSize: 10
})

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const handleSizeChange = () => {
  init()
}
const handleCurrentChange = () => {
  init()
}
const init = () => {}
</script>